<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>首页一</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.8/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

        .top-panel>.layui-card-body {
            height: 60px;
        }

        .top-panel-number {
            line-height: 60px;
            font-size: 30px;
            border-right: 1px solid #eceff9;
        }

        .top-panel-tips {
            line-height: 30px;
            font-size: 12px
        }
    </style>
</head>

<body>
    <!-- <div class="layuimini-container"> -->
    <div class="layuimini-main">

        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">月内入库量</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md8 top-panel-number">
                                12,026m²
                            </div>
                            <div class="layui-col-xs3 layui-col-md4 top-panel-tips">
                                比平均 <a style="color: #1aa094">▲0.11</a><br>
                                比上月 <a style="color: #bd3004">▼0.08</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">月内出库量</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md8 top-panel-number">
                                8,073m²
                            </div>
                            <div class="layui-col-xs3 layui-col-md4 top-panel-tips">
                                比平均 <a style="color: #bd3004">▼0.07</a><br>
                                比上月 <a style="color: #bd3004">▼0.16</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">本月订单额度</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md8 top-panel-number">
                                154,026.4￥
                            </div>
                            <div class="layui-col-xs3 layui-col-md4 top-panel-tips">
                                比平均 <a style="color: #bd3004">▼0.16</a><br>
                                比上月 <a style="color: #1aa094">▲0.12</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">本月预估收入</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md8 top-panel-number">
                                74,158.7￥
                            </div>
                            <div class="layui-col-xs3 layui-col-md4 top-panel-tips">
                                比平均 <a style="color: #bd3004">▼0.21</a><br>
                                比上月 <a style="color: #bd3004">▼0.18</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md9">
                <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
            </div>
            <div class="layui-col-xs12 layui-col-md3">
                <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
            </div>
        </div>


        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md6">
                <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
            </div>
            <div class="layui-col-xs12 layui-col-md6">
                <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
            </div>
        </div>


    </div>
    <!-- </div> -->
    <script src="/lib/layui-v2.6.8/layui.js" charset="utf-8"></script>
    <script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script>
        layui.use(['layer', 'echarts'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                echarts = layui.echarts;

            /**
             * 报表功能
             */
            var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

            var optionRecords = {
                title: {
                    text: '存量数据-总览'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['个体销售', '自产装配', '经销合作', '积库清理', '废弃报销']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                        name: '个体销售',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: [20, 32, 61, 34, 10, 30, 10]
                    },
                    {
                        name: '自产装配',
                        type: 'line',
                        areaStyle: {},
                        data: [20, 82, 91, 34, 90, 30, 10]
                    },
                    {
                        name: '经销合作',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: [50, 32, 21, 54, 30, 30, 10]
                    },
                    {
                        name: '积库清理',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: [20, 32, 31, 34, 60, 30, 20]
                    },
                    {
                        name: '废弃报销',
                        type: 'line',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        areaStyle: {},
                        data: [20, 32, 91, 34, 90, 30, 20]
                    }
                ]
            };
            echartsRecords.setOption(optionRecords);


            /**
             * 玫瑰图表
             */
            var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
            var optionPies = {
                title: {
                    text: '销售类型统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['个体户', '经销商', '自装配', '家装城', '企业']
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    roseType: 'radius',
                    data: [{
                            value: 235,
                            name: '个体户'
                        },
                        {
                            value: 310,
                            name: '经销商'
                        },
                        {
                            value: 234,
                            name: '自装配'
                        },
                        {
                            value: 135,
                            name: '家装城'
                        },
                        {
                            value: 168,
                            name: '企业'
                        }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            echartsPies.setOption(optionPies);


            /**
             * 柱状图
             */
            var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');

            var optionDataset = {
                legend: {},
                tooltip: {},
                dataset: {
                    dimensions: ['product', '2021', '2022', '2023'],
                    source: [{
                            product: '生产力指标',
                            '2021': 43.3,
                            '2022': 85.8,
                            '2023': 93.7
                        },
                        {
                            product: '采购效能指标',
                            '2021': 83.1,
                            '2022': 73.4,
                            '2023': 55.1
                        },
                        {
                            product: '销售效能指标',
                            '2021': 86.4,
                            '2022': 65.2,
                            '2023': 82.5
                        },
                        {
                            product: '客户交互量',
                            '2021': 72.4,
                            '2022': 53.9,
                            '2023': 39.1
                        }
                    ]
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{
                        type: 'bar'
                    },
                    {
                        type: 'bar'
                    },
                    {
                        type: 'bar'
                    }
                ]
            };

            echartsDataset.setOption(optionDataset);


            /**
             * 中国地图
             */
            var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');


            var optionMap = {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: [
                        ['product', '一月', '二月', '三月', '四月', '五月', '六月'],
                        ['废弃原材', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                        ['废弃成品', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                        ['消耗原材', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                        ['成品产出', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                    ]
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    gridIndex: 0
                },
                grid: {
                    top: '55%'
                },
                series: [{
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row'
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row'
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row'
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row'
                    },
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'
                        },
                        encode: {
                            itemName: 'product',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            };

            echartsMap.setOption(optionMap);

            // echarts 窗口缩放自适应
            window.onresize = function () {
                echartsRecords.resize();
            }

        });
    </script>
</body>

</html>